﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>三列布局</title>
	<style type="text/css">
	/*1*/
		.left,.right{width:100px;float:left;}
		.center{float:left;width:calc(100% - 200px);}
		
	.parent1{position:relative;top:120px;}
	.left1,.right1,.center1{position:absolute;}
	.left1{left:0;width:100px;}
	.right1{right:0;width:100px;}
	.center1{left:100px;right:100px;}
	
	.box{position:relative;top:200px;}
	#left,
		#right {
		float: left;
		margin: 0 0 0 -271px;
		width: 50%;
		}

		#main {
		width: 540px;
		float: left;
		background: green;
		}
			
		.inner {
		padding: 20px;
		}
			
		#left .inner,
		#right .inner {
		margin: 0 0 0 271px;
		background: orange;
		}

		#myiframe{margin-top:300px}
	</style>
</head>
<body>
<!-- 1 -->
	<div class="parent" style="background-color: lightgrey;">  
		<div class="left" style="background-color: lightblue;">  
			<p>left</p>  
		</div>       
		<div class="center" style="background-color: pink;">  
			<p>center</p>  
			<p>center</p>  
		</div>       
		<div class="right"  style="background-color: lightgreen;">  
			<p>right</p>  
		</div>           
	</div> 
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<!-- 2 -->
	<div class="parent1" style="background-color: lightgrey;">  
		<div class="left1" style="background-color: lightblue;">  
			<p>left</p>  
		</div>       
		<div class="center1" style="background-color: pink;">  
			<p>center</p>  
			<p>center</p>  
		</div>       
		<div class="right1"  style="background-color: lightgreen;">  
			<p>right</p>  
		</div>           
	</div> 
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<!-- 3 -->
	<div class="box">
		<div id="left">
			<div class="inner">this is left sidebar content</div>
		</div>
		<div id="main">
			<div class="inner">this is main content</div>
		</div>
		<div id="right">
			<div class="inner">this is right siderbar content</div>
		</div>
	</div>
	<div class="box">
		<div id="left">
			<div class="inner">this is left sidebar content</div>
		</div>
		<div id="main">
			<div class="inner">this is main content</div>
		</div>
		<div id="right">
			<div class="inner">this is right siderbar content</div>
		</div>
	</div>
	<div class="box">
		<div id="left">
			<div class="inner">this is left sidebar content</div>
		</div>
		<div id="main">
			<div class="inner">this is main content</div>
		</div>
		<div id="right">
			<div class="inner">this is right siderbar content</div>
		</div>
	</div>
	<div class="box">
		<div id="left">
			<div class="inner">this is left sidebar content</div>
		</div>
		<div id="main">
			<div class="inner">this is main content</div>
		</div>
		<div id="right">
			<div class="inner">this is right siderbar content</div>
		</div>
	</div>
</body>
</html>